<template>
  <VPage class="app-container">
    <VTable ref="tableRef" v-bind="tableOptins">
      <template #form="{ form }">
        <el-input
          v-model.trim="form.goods_name"
          class="!w-[160px]"
          placeholder="标准商品全名"
          clearable
        ></el-input>
        <multi-input
          v-model="form.customs_goods_code"
          placeholder="海关编码,批量搜索,一行一个"
          class="w-60"
        ></multi-input>
        <el-select
          v-model="form.special_identify"
          placeholder="特殊商品标识"
          class="!w-[160px]"
          clearable
        >
          <el-option
            v-for="item in markingOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-input
          v-model.trim="form.declare_elements_list"
          class="!w-[220px]"
          placeholder="申报要素项"
          clearable
        ></el-input>
      </template>
      <template #toolbar_btns>
        <VButton
          auth="/goods/basics/customs-number/add"
          type="primary"
          @click="handleComModal('add')"
          ><svg-icon icon-class="add_new" />新增</VButton
        >
        <VButton
          auth="/goods/basics/customs-number/delete"
          :loading="loadings.del"
          @click="handleDelete"
          ><svg-icon class="mr-1 text-red-500" icon-class="del" />删除</VButton
        >
        <VButton
          auth="/goods/basics/customs-number/declaration-element"
          :loading="loadings.del"
          @click="handleDeclarationElement"
          >申报要素项维护</VButton
        >

        <VButton
          auth="/goods/basics/customs-number/import"
          class="ml-auto"
          @click="handleImport"
          >导入</VButton
        >
        <VButton auth="/goods/basics/customs-number/export" @click="handleExport"
          >导出</VButton
        >
      </template>
    </VTable>
  </VPage>
  <ComModal ref="ComModalRef" @query="query" />
  <ImportExcel ref="importExcelRef">
    <template #footer>
      <div class="text-[#999]">1、一次最多导入500条数据</div>
      <div class="text-[#999]">
        2、海关编码已存在，则导入后更新数据；海关编码不存在，则导入后新增数据；
      </div>
    </template>
  </ImportExcel>
  <DerivedCenter ref="DerivedCenterRef"></DerivedCenter>
  <DeclarationElement ref="DeclarationElementRef"></DeclarationElement>
</template>
<script setup lang="jsx" name="BasicsCustoms-number">
import ComModal from "./components/ComModal.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { queryCustomsList, deleteCustoms, importCustoms } from "./api";
import DerivedCenter from "@/components/DerivedCenter";
import ImportExcel from "@/components/ImportExcel";
import { markingOptions } from "./data.js";
import DeclarationElement from "./components/DeclarationElement";

const tableRef = ref();
const ComModalRef = ref(null);
let options = reactive({});
const loadings = reactive({
  enable: false,
  disable: false,
  del: false,
});

const tableOptins = reactive({
  formConfig: {
    data: {},
  },
  rowConfig: {
    height: 152,
  },
  columns: [
    { type: "checkbox", width: 50 },
    {
      field: "customs_goods_code",
      title: "海关商品码",
      minWidth: 120,
    },
    {
      field: "goods_name",
      title: "标准商品全名",
      minWidth: 120,
    },
    {
      field: "special_identify",
      title: "特殊商品标识",
      minWidth: 120,
    },
    {
      field: "code_unit",
      title: "商品码单位",
      minWidth: 120,
    },
    {
      field: "refund_tax_rate",
      title: "退税率%",
      minWidth: 120,
    },
    {
      field: "declare_elements_list",
      title: "申报要素维护项",
      width: 170,
      slots: {
        default: ({ row }) => {
          const declare_elements_list = row.declare_elements_list;
          return (
            <div>
              {declare_elements_list.map((i, index) => {
                if (index < 5) {
                  return (
                    <div>
                      {i.sort}.{i.text}
                    </div>
                  );
                }
              })}
              {declare_elements_list.length > 5 ? (
                <el-button
                  type="primary"
                  link
                  onClick={() => handleCheckDeclare(row.declare_elements_list)}
                >
                  点击查看全部
                </el-button>
              ) : (
                ""
              )}
            </div>
          );
        },
      },
    },
    {
      field: "remark",
      title: "备注",
      minWidth: 120,
    },
    {
      field: "created_user_text",
      title: "创建人",
      minWidth: 120,
    },
    {
      field: "created_at",
      title: "创建时间",
      width: 170,
    },
    {
      field: "updated_user_text",
      title: "最近更新人",
      minWidth: 120,
    },
    {
      field: "updated_at",
      title: "更新时间",
      width: 170,
    },
    {
      title: "操作",
      fixed: "right",
      width: 120,
      slots: {
        default: ({ row }) => {
          return (
            <div class="flex justify-start">
              <VButton
                auth="/goods/basics/customs-number/edit"
                type="primary"
                link
                class="mr-2"
                onClick={() => handleComModal("edit", row.id)}
              >
                编辑
              </VButton>
            </div>
          );
        },
      },
    },
  ],
  proxyConfig: {
    props: {
      result: "data",
      total: "total",
    },
    autoLoad: false,
    ajax: {
      query: ({ page, form }) => queryCustomsList({ ...form, ...page }),
    },
  },
});

const query = () => {
  tableRef?.value.query();
};

//获取已选中的行
const getSelectRow = () => {
  return tableRef?.value.$table.getCheckboxRecords();
};

const handleComModal = (type, id) => {
  nextTick(() => {
    ComModalRef.value.open(type, id);
  });
};

const importExcelRef = ref();
const handleImport = () => {
  nextTick(() => {
    const params = {
      title: "批量导入海关编码",
      tempApi:
        "https://xc-goods.oss-cn-shenzhen.aliyuncs.com/goods/20240613/%E7%94%B3%E6%8A%A5%E8%A6%81%E7%B4%A0%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF171827307974886.xlsx",
      importApi: importCustoms,
    };
    importExcelRef.value?.acceptParams(params);
  });
};

const isHandle = () => {
  const records = getSelectRow();
  return !records.length ? ElMessage.error("请先选择行!") && false : true;
};

const handleDelete = () => {
  if (!isHandle()) return;
  const records = getSelectRow().map((i) => i.id);
  ElMessageBox.confirm("此操作将永久删除该项, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    confirmButtonClass: "btnFalses",
  }).then(() => {
    loadings.del = true;
    deleteCustoms({ ids: records })
      .then((res) => {
        query();
        ElMessage.success(res.message);
      })
      .finally(() => {
        loadings.del = false;
      });
  });
};

const DerivedCenterRef = ref();
const handleExport = () => {
  let condition = tableRef.value.getQueryForm();
  DerivedCenterRef.value.open({
    tag_name: "goods_base_customs",
    condition,
  });
};

const handleCheckDeclare = (list) => {
  ElMessageBox({
    title: "申报要素维护项目",
    message: (
      <div>{list.map((item, index) => h("p", null, index + "." + item.text))}</div>
    ),
  });
};

// 申报要素维护
const DeclarationElementRef = ref();
const handleDeclarationElement = () => {
  DeclarationElementRef.value.open();
};
</script>
<style lang="scss">
.el-message-box {
  background-color: var(--base-dialog-bg-color) !important;
}
</style>
